<template>
	<view>
		<view class="page-foot bg-white">
			<view class="foot-box1 flex-box tc m-hairline--top" v-if="((courseDetail.is_charge == 1 && !courseDetail.is_vip && !courseDetail.is_buy) || (courseDetail.is_charge == 2 && !courseDetail.is_buy)) && !courseDetail.is_free">
				<navigator class="mr20" open-type="switchTab" url="/pages/index/index" hover-class="none">
					<image class="icon" src="/static/icon/icon_home.png" mode="aspectFit"></image>
					<view class="fs22 col-6">首页</view>
				</navigator>
				<view class="mr20" @click="sharePopOpen">
					<image class="icon" src="/static/icon/icon_share2.png" mode="aspectFit"></image>
					<view class="fs22 col-6">分享</view>
				</view>
				<view class="mr20">
				<image @click="collect" class="icon" v-if="!courseDetail.collection_status" src="/static/icon/icon_collect_on.png" mode="aspectFit"></image>
				<image @click="collect" class="icon" v-else src="/static/icon/icon_collect_selected.png" mode="aspectFit"></image>
					<view class="fs22 col-6">收藏</view>
				</view>
				<!-- #ifdef H5 -->
				<template>
					<view class="fs36 col-red fwb flex-1" v-if="courseDetail.is_charge==0">免费</view>
					<view class="g-price2 flex-1 fwb" v-else>{{courseDetail.salesprice}}</view>
				</template>
				<view class="g-btn1 middle" @click="buy()">立刻学习</view>
				<!-- #endif -->
				
				<!--#ifdef MP-WEIXIN -->
				<!-- ios端会屏蔽支付，如果需要开启请注释v-if-->
				<template v-if="!isIos  || platformStatus==1">
					<view class="fs36 col-red fwb flex-1" v-if="courseDetail.is_charge==0">免费</view>
					<view class="g-price2 flex-1 fwb" v-else-if="platformStatus == 1 || !isIos">{{courseDetail.salesprice}}</view>
				</template>
				<!-- ios端会屏蔽支付，如果需要开启请打开注释，platformStatus 为后台开关-->
				<view class="g-btn1 middle" @click="buy()" v-if="!isIos || platformStatus==1">立刻学习</view>
				<!-- #endif -->
				
				<!-- <view class="g-btn1 middle" @click="buy()" v-if="!isIos">立刻学习</view> -->
				
			</view>
			<!--  -->
			<view class="foot-box2 flex-box" v-else>
				<view @click="commentPopOpen" class="comment-box flex-box flex-1 plr20">
					<image class="icon1 mr10" src="/static/icon/icon_write.png" mode="aspectFit"></image>
					<view class="m-input flex-1">写评论...</view>
				</view>
				<!-- <image class="icon2 ml25" src="/static/icon/icon_money.png" mode="aspectFit"></image> -->
				<image @click="sharePopOpen" class="icon2 ml30" src="/static/icon/icon_share3.png" mode="aspectFit"></image>
				<image @click="collect" class="icon2 ml30" v-if="!courseDetail.collection_status" src="/static/icon/icon_collect_on.png" mode="aspectFit"></image>
				<image @click="collect" class="icon2 ml30" v-else src="/static/icon/icon_collect_selected.png" mode="aspectFit"></image>
			</view>
		</view>
		<view class="container pr">
			<image class="m-backdrop" src="../../static/icon/icon_back2.png" mode="widthFix"></image>
			<!-- 课程信息 -->
			<view class="course-info-wrap p30 pr">
				<view class="media-box pr mb40">
					<view class="poster-box" v-if="courseDetail.course_file.length >0 && courseDetail.type == 1 && isHideVideo">
						<image class="video-poster" :src="courseFile.poster_image ?courseFile.poster_image:courseDetail.thumb_image" mode="aspectFill"></image>
						<image @click="checkMediaPlay('video')" class="video-btn" src="../../static/icon/icon_play1.png" mode="aspectFit"></image>
					</view>
					<!-- 视频  poster 封面-->
					<video v-if="courseDetail.course_file.length >0 && courseDetail.type == 1 && !isHideVideo" id="myVideo" class="media" :poster="courseFile.poster_image ? courseFile.poster_image : courseDetail.thumb_image" @loadedmetadata="playOrPause()" :src="courseFile.file ? courseFile.file : ''" @pause="playTime()" @ended="playTime()" @timeupdate="timeChange" controls></video>
					<!-- 音频  图片 -->
					<image v-if="courseDetail.course_file&&courseDetail.course_file.length >0 && courseDetail.type == 2" class="media" :src="courseFile.poster_image ? courseFile.poster_image : courseDetail.thumb_image" mode="aspectFill"></image>
					<image v-if="courseDetail.course_file&&courseDetail.course_file.length<=0" class="media" :src="courseFile.poster_image ? courseFile.poster_image : courseDetail.thumb_image" mode="aspectFill"></image>
					<view class="progress-bar flex-box flex-center fs20 col-f" v-if="courseDetail.type == 2">
						<view @click="checkMediaPlay('player')">
							<image class="icon" v-if="audioPlayStatus" src="/static/icon/icon_suspend2.png" mode="aspectFit"></image>
							<image class="icon" v-else src="/static/icon/icon_play.png" mode="aspectFit"></image>
						</view>
						<view class="flex-1">
							<slider @change='changeAudio' backgroundColor="#FFF" activeColor='#ED1F34' :min='0' :max='duration.toFixed(0)' :value='viewTime.toFixed(0)' :step='0.1'></slider>
						</view>
						<view class="ml10">{{remainingTime}}</view>
					</view>
				</view>
				
				<view class="mb20">
					<text class=" fs36 col-black">{{courseFile.name ? courseFile.name : courseDetail.name}}</text>			
					<!-- ios端会屏蔽支付价格，如果需要开启请把v:if注释掉 -->
					<template v-if="!isIos  || platformStatus==1">
					<text class="label-free" v-if="courseDetail.is_charge == 0 || courseFile.is_free == 1">免费</text>
					</template>
				</view>
				
				<view class="flex-box mb20">
					<image class="icon-play-num mr10" src="/static/icon/icon_play2.png" mode="aspectFit"></image>
					<view class="fs24 col-9">{{courseDetail.play_count ? courseDetail.play_count : 0}}人学习过</view>
				</view>
				<view class="flex-box pb30 mb30 m-hairline--bottom">
					<!-- ios端会屏蔽支付价格，如果需要开启请把v:if注释掉 -->
					<template v-if="!isIos  || platformStatus==1">
					<view class="fs36 col-red fwb flex-1" v-if="courseDetail.is_charge == 0">免费</view>
					<!-- 视频价格 -->
					<view v-else class="flex-1" :class="courseDetail.type == 1 ? 'g-price2' : 'g-price1'">{{courseDetail.salesprice ? courseDetail.salesprice : 0}}</view>
					</template>
					<!-- 音频价格 -->
					<!-- <view class=" flex-1">100</view> -->
					
					<button @click="sharePopOpen" class="btn-share m-button flex-box flex-center" v-if="courseDetail.type==1">
						<image class="mr10" src="/static/icon/icon_share1.png" mode="aspectFit"></image>
						<text>分享</text>
					</button>
					<!-- 音频标签按钮 -->
					<button class="audio-btn m-button flex-box flex-center" v-if="courseDetail.type==2">
						<image class="mr10" src="/static/icon/icon_volume.png" mode="aspectFit"></image>
						<text>音频</text>
					</button>
					<button @click="sharePopOpen" class="audio-btn m-button flex-box flex-center" v-if="courseDetail.type==2">
						<image class="mr10" src="/static/icon/icon_share4.png" mode="aspectFit"></image>
						<text>分享</text>
					</button>
				</view>
				<view class="fs24 col-6">{{courseDetail.description}}</view>
				<!-- 音频控制按钮 -->
				<view class="audio-box mtb30" v-if="courseDetail.type == 2">
					<!-- <audio class="audio" id="" :src="courseFile.file" @play="" @pause=""></audio> -->
					<view class="flex-box flex-between fs20 col-9 tc">
						<!-- <view>
							<image class="icon1" src="/static/icon/icon_list.png" mode="aspectFit"></image>
							<view>播放列表</view>
						</view> -->
						<image class="icon2" @click="prev()" src="/static/icon/icon_previous.png" mode="aspectFit"></image>
						<view @click="checkMediaPlay('player')">
							<image class="icon2" v-if="audioPlayStatus" src="/static/icon/icon_suspend2.png" mode="aspectFit"></image>
							<image class="icon2" v-else src="/static/icon/icon_play.png" mode="aspectFit"></image>
						</view>
						<image class="icon2" @click="next()" src="/static/icon/icon_next.png" mode="aspectFit"></image>
						<!-- <view>
							<image class="icon1" src="/static/icon/icon_time.png" mode="aspectFit"></image>
							<view>定时关闭</view>
						</view> -->
					</view>
				</view>
			</view>
			<!-- 详情介绍课程列表学习感悟 -->
			<view class="detail-wrap mb40">
				<view class="detail-tab flex-box">
					<view v-for="(item, index) in detailTabList" :class="{ active: detailTabCurrent === index }" @click="detailTabClick(index)" class="tab-item mr5 flex-1">{{ item }}</view>
				</view>
				<view class="detail-body" :class="{ show: isShow }">
					<view class="p30">
						<view v-if="detailTabCurrent == 0" class="fs28 col-0">
							<block v-if="courseDetail.introduce">
								<rich-text :nodes="courseDetail.introduce"></rich-text>
							</block>
							
						</view>
						<view v-else-if="detailTabCurrent == 1">
							<view class="course-list2">
								<view @click="changeCourseStep(index)" v-for="(item,index) in courseDetail.course_file" :key="item.id" class="nav-course flex flex-align-start">
									<image class="img-course mr30" :src="item.poster_image" mode="aspectFill"></image>
									<view class="flex-1 pt10">
										<view class="m-ellipsis fs26 col-0 fwb mb20">{{item.name}}</view>
										<view class="m-ellipsis-l2 fs22 col-6"></view>
									</view>
								</view>
							</view>
						</view>
						<view v-else class="learn-perception">
							<view v-for="(item,index) in courseDetail.course_comment" :key="item.id" class="perception flex flex-align-start ptb25">
								<image class="img-head mr20" :src="item.user ? item.user.avatar : ''" mode="aspectFill"></image>
								<view class="flex-1">
									<view class="mb30 fs26 col-blue">{{item.user ? item.user.nickname : ''}}</view>
									<view class="mb30 fs28 col-black">{{item.content}}</view>
									<view class="flex-box">
										<view class="fs24 col-black flex-1">{{item.createtime_text}}</view>
										<!-- <view class="flex-box">
											<image class="icon-thumbs mr10" src="/static/icon/icon_thumbs_normal.png" mode="aspectFill"></image>
											<image class="icon-thumbs mr10" src="/static/icon/icon_thumbs_selected.png" mode="aspectFill"></image>
											<view class="fs26 col-black">51</view>
										</view> -->
									</view>
								</view>
							</view>
							<view class="nothing" v-if="courseDetail.course_comment.length<=0">
								<image src="/static/icon/img_null.png" mode="aspectFill"></image>
								<text>暂无数据</text>
							</view>
						</view>
					</view>
				</view>
				<view @click="showDetail" class="detail-foot pt40 flex-box flex-center">
					<view class="mr20 fs28 col-black">{{ isShow ? '收起' : '展开' }}</view>
					<image class="icon-arrowup" :class="{ rotate: !isShow }" src="/static/icon/icon_arrow_up.png" mode="aspectFit"></image>
				</view>
			</view>
			<!-- 打赏 -->
			<!-- <view class="reward-wrap plr30 mb55">
				<view class="reward-text">
					<view>赠人玫瑰，收留余香！</view>
					<view>如果你学完以上内容有收获欢迎打赏</view>
				</view>
				<view @click="rewardPopOpen" class="btn-reward flex-box flex-center">
					<image class="icon-reward" src="/static/icon/icon_reward.png" mode="aspectFit"></image>
					<view>打赏</view>
				</view>
				
				<view class="flex-box mb35">
					<view class="fs32 col-black flex-1">打赏排行榜</view>
					<navigator class="fs24 col-9" url="#" hover-class="none">更多></navigator>
				</view>
				<view class="reward-tab flex-box br10 mb5">
					<view class="tab-item flex-1" :class="{ active: rewardTabCurrent === 0 }" @click="rewardTabClick(0)">实时打赏榜</view>
					<view class="tab-item flex-1" :class="{ active: rewardTabCurrent === 1 }" @click="rewardTabClick(1)">打赏排行榜</view>
				</view>
				<view v-for="item in 2" class="reward-item ptb40 flex-box">
					<image class="img-head mr20" src="../../static/icon/img_service.png" mode="aspectFill"></image>
					<view class="flex-1">
						<view class="mb5 fs26 col-black">米苏1351</view>
						<view class="flex-box">
							<view class="fs24 col-6 flex-1">2019-10-29 19:00:00</view>
							<view class="g-price1">100</view>
						</view>
					</view>
				</view>
			</view> -->
			<!-- 学习感悟 -->
			<!-- <view class="plr30 mb55">
				<view class="fs32 col-black mb10">学习感悟</view>
				<view class="learn-perception">
					<view v-for="item in 2" class="perception flex flex-align-start ptb25">
						<image class="img-head mr20" src="/static/images/img_kechen1.png" mode="aspectFill"></image>
						<view class="flex-1">
							<view class="mb30 fs26 col-blue">米苏1351</view>
							<view class="mb30 fs28 col-black">凝聚团队人才成就园所如何凝聚团队人才成就园 所如何凝聚团队人才成就园凝聚团队人才成就园 所如何凝聚团队。</view>
							<view class="flex-box">
								<view class="fs24 col-black flex-1">34分钟前</view>
								<view class="flex-box">
									<image class="icon-thumbs mr10" src="/static/icon/icon_thumbs_normal.png" mode="aspectFill"></image>
									<image class="icon-thumbs mr10" src="/static/icon/icon_thumbs_selected.png" mode="aspectFill"></image>
									<view class="fs26 col-black">51</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view> -->
			<!-- 相关推荐 -->
			<view class="p30">
				<view class="flex-box mb40">
					<view class="fs32 col-black flex-1">相关推荐</view>
					<navigator class="fs24 col-9" :url="'/pages/more_rec/more_rec?course_id='+courseDetail.id" hover-class="none">更多></navigator>
				</view>
				<view class="recommend-list">
					<view class="item flex-box" @click="navication(item.id,item.type)" open-type="redirect" v-for="(item,index) in guessCourseLists" :key="item.id">
						<view class="pr mr30">
							<image class="img-post br10" :src="item.thumb_image" mode="aspectFill"></image>
							<!-- <view class="time">00:08:00</view> -->
						</view>
						<view class="flex-1">
							<view class="fs26 col-black mb70">{{item.name}}</view>
							<view class="flex-box">
								<image class="icon-media mr10" v-if="item.type==2" src="/static/icon/icon_book.png" mode="aspectFit"></image>
								<image class="icon-media mr10" v-else src="/static/icon/icon_tv.png" mode="aspectFit"></image>
								
								<view class="fs20 col-6">{{item.type==3?item.total_num:item.play_count}}人学习过</view>
							</view>
						</view>
					</view>
					
				</view>
			</view>
			<!--  -->
		</view>
		<!-- 分享弹窗 -->
		
		<uni-popup ref="sharePopup" type="bottom">
			<view class="share-pop" catchtouchmove="true">
				<view class="flex-box flex-between mb70 tc">
					
					<!-- #ifdef MP-WEIXIN -->
					<button class="fs28 col-black" open-type="share">
						<image class="icon" src="/static/icon/icon_wx.png" mode="aspectFit"></image>
						<view>转发好友</view>
					</button>
					<!-- #endif -->
					<view @click="posterPopOpen" class="fs28 col-black">
						<image class="icon" src="/static/icon/icon_poster.png" mode="aspectFit"></image>
						<view>生成海报</view>
					</view>
					<!-- #ifdef H5 -->
					<view class="fs28 col-black" @click="copyLink()">
						<image class="icon" src="/static/icon/icon_link.png" mode="aspectFit"></image>
						<view>复制链接</view>
					</view>
					
					<!-- #endif -->
					
				</view>
				<view class="ptb20 fs28 col-9 tc" @click="sharePopClose">关闭</view>
			</view>
		</uni-popup>
		<!-- 打赏弹窗 -->
		<uni-popup ref="rewardPopup" type="bottom">
			<view class="reward-pop" catchtouchmove="true">
				<view class="mb50 fs36 tc col-black">请选择打赏金额</view>
				<view class="mb40 flex flex-align-start flex-wrap">
					<view class="reward-label active">5元</view>
					<view class="reward-label">10元</view>
					<view class="reward-label">20元</view>
					<view class="reward-label">30元</view>
					<view class="reward-label">50元</view>
					<view class="reward-label">100元</view>
				</view>
				<view class="pb30 flex-box m-hairline--bottom mb35">
					<view class="fs32 col-black mr35">自定义金额</view>
					<input class="flex-1 fs32 col-black" type="digit" placeholder="请输入打赏金额" placeholder-style="color:var(--placeholder);" />
				</view>
				<view class="tip fs24 col-9">您好，打赏是自愿赠送给管理员或者平台的虚拟商品。打赏是自 愿赠送给管理员或者平台的虚拟商品。</view>
				<view class="g-btn1">去打赏</view>
			</view>
		</uni-popup>
		<!-- 评论弹窗 -->
		<uni-popup ref="commentPopup" type="bottom">
			<view class="comment-pop" catchtouchmove="true">
				<view class="mb40 fs36 tc col-black">发表评论</view>
				<textarea class="textarea" v-model="content" value="" placeholder="请输入评论内容" placeholder-class="col-9" maxlength="500"></textarea>
				<view class="g-btn1" @click="addComment()">发送</view>
			</view>
		</uni-popup>
		<!-- 海报弹窗 -->
		<uni-popup ref="posterPopup" type="center">
			<view class="poster-popup" catchtouchmove="true">
				<image @longpress="saveImage" class="img-poster" :src="posterPath" mode="widthFix"></image>
				<view class="tip">—— 长按保存课程海报图片 ——</view>
			</view>
		</uni-popup>
		<!-- 画板 -->
		<l-painter isCanvasToTempFilePath @success="posterPath = $event" custom-style="position: fixed; left: 200%;" css="width: 630rpx;height: 830rpx;border-radius: 15rpx;">
			<l-painter-image src="/static/icon/icon_back10.png" css="object-fit: cover; object-position: 50% 50%; width: 100%; height: 830rpx;border-radius: 15rpx;display:block;" />
			<l-painter-view css="position: absolute;top:0;left:0;right:0;bottom:0;width: 630rpx; height: 830rpx;">
				<l-painter-view css="position: absolute;top:70rpx;left:0;right:0rpx;text-align:center;">
					<l-painter-text text="课程分享" css="font-size:36rpx;font-weight:bold;color:#fff;line-height:40rpx;"></l-painter-text>
				</l-painter-view>
				<l-painter-view css="position: absolute;top:85rpx;left:105rpx;width:120rpx;height:2rpx;background:#FFFFFF;"></l-painter-view>
				<l-painter-view css="position: absolute;top:85rpx;right:105rpx;width:120rpx;height:2rpx;background:#FFFFFF;"></l-painter-view>
				<l-painter-view css="position: absolute;top:140rpx;left:75rpx;right:75rpx;height: 90rpx;width: 480rpx;border: 1rpx solid #F24682;padding:8rpx;">
					<l-painter-view css="width:100%;height:100%;background: #F24682;text-align:center;">
						<l-painter-text :text="courseDetail.name" css="font-size:36rpx;color:#FFF;line-height:90rpx;line-clamp:1;"></l-painter-text>
					</l-painter-view>
				</l-painter-view>
				<l-painter-view css="position: absolute;top:370rpx;left:35rpx;">
					<l-painter-text :text="courseDetail.description" css="font-size:28rpx;color:#000;line-height:48rpx;line-clamp:3;"></l-painter-text>
				</l-painter-view>
				<l-painter-view css="position: absolute;top:520rpx;left:40rpx;width:275rpx;">
					<l-painter-text text="金牌讲师：" css="font-size:28rpx;color:#000;line-height:40rpx;"></l-painter-text>
					<l-painter-text :text="courseDetail.teacher.name" css="font-size:28rpx;color:#F24682;line-height:40rpx;"></l-painter-text>
				</l-painter-view>
				<l-painter-view css="position: absolute;top:520rpx;right:20rpx;width:295rpx;">
					<l-painter-text text="课程学习人次：" css="font-size:28rpx;color:#000;line-height:40rpx;"></l-painter-text>
					<l-painter-text :text="courseDetail.total_num + ''" css="font-size:28rpx;color:#F24682;line-height:40rpx;"></l-painter-text>
				</l-painter-view>
				<l-painter-view css="position: absolute;top:630rpx;left:40rpx;width:550rpx;border: 2rpx dashed #C2C2C2;"></l-painter-view>
				<l-painter-image
					:src="courseDetail.teacher.thumb_image"
					css="position: absolute;bottom: 45rpx;left: 40rpx; object-fit: cover; object-position: 50% 50%; width: 102rpx; height: 102rpx;border-radius: 50%;"
				/>
				<l-painter-view css="position: absolute;top: 685rpx;left:165rpx;">
					<l-painter-text :text="courseDetail.teacher.name" css="font-size:28rpx;color:#000;line-height:40rpx;line-clamp:1;"></l-painter-text>
				</l-painter-view>
				<l-painter-view css="position: absolute;top: 725rpx;left:165rpx;">
					<l-painter-text text="邀请您一起学习\n长按扫码听课" css="font-size:24rpx;color:#000;line-height:30rpx;line-clamp:2;"></l-painter-text>
				</l-painter-view>
				<l-painter-image :src="courseDetail.qrcode" css="position: absolute;top: 675rpx;right:30rpx;object-fit: cover; object-position: 50% 50%; width: 108rpx; height: 108rpx;display:block;" />
				
			</l-painter-view>
		</l-painter>
	</view>
</template>

<script>
export default {
	data() {
		return {
			//观看时间
			duration:0,
			viewTime:0,
			remainingTime: "00:00:00",
			course_id: 0,
			course_file_id:0,
			courseDetail:{teacher:{name:''}},
			// 当前播放文件
			courseFile:[],
			courseFileIndex:0,
			//播放状态
			audioPlayStatus: false,
			audioFirstPlayStatus: false,
			videoPlayStatus: false,
			initVideoStatus: false,
			initAudioStatus: false,
			detailTabList: ['详情介绍', '课程列表', '学习感悟'],
			detailTabCurrent: 0,
			rewardTabCurrent: 0,
			isShow: true,
			posterPath: '',
			guessCourseLists:[],
			// 评价
			content: '',
			isHideVideo: true,
			platformStatus: 0,
			isIos: getApp().globalData.isIos,
		};
	},
	onLoad(options) {
		let scene = decodeURIComponent(options.scene) || '';
		if(scene){
			for (var i = 0; i < scene.split('&').length;i++){
			    var arr = scene.split('&')[i].split('=');
			    options[arr[0]] = arr[1];
			}
		}
		this.course_id = options.course_id;
		
		this.course_file_id = options.course_file_id || 0;
		this.fetchConfig()
		this.fetchCourseDetail();
		this.fetchGuessLike();
		//支付成功后
		let that = this;
		uni.$on('buySuccess',function(data){
			that.fetchCourseDetail();
		})
	},
	onHide(){
		this.destroyMedia();
		this.playTime();
	},
	onUnload(){
		this.destroyMedia();
		this.playTime();
	},
	onShareAppMessage(e){
		if(e.from=='button'){
			let courseDetail = this.courseDetail;
			//console.log(courseDetail)
			let userinfo = this.$user.getUserinfo();
			let user_id = userinfo ? userinfo.id : 0;
			return {
			  title: courseDetail.name,
			  imageUrl: courseDetail.thumb_image,
			  path: '/pages/course_video_detail/course_video_detail?course_id='+courseDetail.id+'&user_id='+user_id
			}
		}
	},
	methods: {
		//复制链接
		copyLink(){
			uni.setClipboardData({
				data: location.href,
				success: function () {
					uni.showToast({
						title:'复制成功',
						icon:'none'
					})
				}
			});
		},
		changeAudio(e){
			console.log(e);
			if(this.innerAudioContent == 'undefined' || !this.innerAudioContent){
				this.viewTime = 0;
				return false;
			}
			let seekTime = e.detail.value;
			this.innerAudioContent.pause();
			this.innerAudioContent.seek(seekTime);
			if(!this.innerAudioContent.paused){
				this.innerAudioContent.play();
			}
			
		},
		fetchConfig(){
			//支付开关
			let that = this;
			that.$core.get({
				url: 'xiluedu.config/config',
				data: {name:'shopinfo'},
				success: ret => {
					//if(ret.data.vip_status != 'undefined'){
					that.platformStatus = ret.data.vip_status || 1;
					//}
				},
				loading: false
			});
		},
		// 设置导航栏标题
		setNavigationBarTitle(text) {
			uni.setNavigationBarTitle({
				title: text
			});
		},
		//课程详情
		fetchCourseDetail(){
			let platform = "wxmini";
			// #ifdef H5
			platform = "h5";
			// #endif
			let course_id = this.course_id;
			this.$core.get({url:'xiluedu.course/detail',data:{platform:platform,course_id: course_id},success:(ret)=>{
				// 设置默认播放
				if(ret.data.course_file.length>0){
					let courseFile  = ret.data.course_file[0]; 
					let courseFileIndex = 0;
					for(let i=0;i<ret.data.course_file.length;i++){
						if(this.course_file_id == ret.data.course_file[i].id){
							courseFile = ret.data.course_file[i];
							courseFileIndex = i;
							break;
						}
					}
					this.courseFile = courseFile;
					this.courseFileIndex = courseFileIndex;
				}
				ret.data.total_num = ret.data.total_num.toString();
				 this.courseDetail = ret.data;
				 console.log(this.courseDetail);
				 this.setNavigationBarTitle(ret.data.name);
				 //初始化
				 //this.initMediaPlay();
			}});
		},
		//相关推荐
		fetchGuessLike(){
			this.$core.get({url:'xiluedu.course/guess_like',data:{course_id: this.course_id},success:(ret)=>{
			      this.guessCourseLists = ret.data.data;
			}});
		},
		//切换分集
		changeCourseStep(index){
			if(this.destroyMedia()){
				uni.redirectTo({
					url: "../course_video_detail/course_video_detail?course_id="+this.course_id+'&course_file_id='+this.courseDetail.course_file[index].id
				})
			}
		},
		
		prev(){
			let courseFileIndex = this.courseFileIndex;
			if(courseFileIndex == 0){
				uni.showToast({title:'没有上一集了~',icon: 'none'});
				return false;
			}
			courseFileIndex--;
			this.changeCourseStep(courseFileIndex)
		},
		next(){
			let courseFileIndex = this.courseFileIndex;
			let len = this.courseDetail.course_file.length;
			if(courseFileIndex == (len-1)){
				uni.showToast({title:'没有下一集了~',icon: 'none'});
				return false;
			}
			courseFileIndex++;
			this.changeCourseStep(courseFileIndex)
		},
		
		//判断是否可以播放
		checkMediaPlay(type){
			let courseDetail = this.courseDetail;
			if(!this.$user.getUserinfo(true)){
				return false;
			}
			if(courseDetail.is_charge == 0 || (courseDetail.is_charge == 1 && courseDetail.is_vip) || courseDetail.is_buy || courseDetail.is_free || this.courseFile.is_free){
				//每次都需要判断是否有初始化的播放器
				this.initMediaPlay();
				switch(type){
					case "player":
					//播放或暂停
						this.playOrPause();
						break;
					case "video":
					//视频播放
						this.isHideVideo = false;
						this.initMediaPlay();
						//this.playOrPause();
						break;
					case "change":
					//切换音视频-刷新页面
						
						break;
				}
			}else{
				uni.showToast({
					title:'请先购买',
					icon:'none'
				});
			}
		},
		
		//音视频播放器初始化
		initMediaPlay(){
			if(this.courseDetail.type == 2){
				if(!this.initAudioStatus){
					this.initAudio();
				}
			}else if(this.courseDetail.type == 1){
				if(!this.initVideoStatus){
					this.initVideo();
				}
			}else{
				uni.showToast({
					title:'非音频不可播放',
					icon:'none'
				})
			}
		},
		//音视频播放还是暂停
		playOrPause(){

			if(this.courseDetail.type == 2){
				if(this.audioFirstPlayStatus){
					if(!this.audioPlayStatus){
						this.innerAudioContent.play();
						this.audioPlayStatus = true;
					}else{
						this.innerAudioContent.pause();
						this.audioPlayStatus = false;
						this.playTime();
					}
				}
				this.audioFirstPlayStatus = true;
			}else if(this.courseDetail.type == 1){
				if(!this.videoPlayStatus){
					//this.play();
					this.videoContext.play();
					this.videoPlayStatus = true;
					
					
				}else{
					//this.pause();
					this.videoContext.pause();
					this.videoPlayStatus = false;
					
				}	
			}else{
				uni.showToast({
					title:'非音视频频不可播放',
					icon:'none'
				})
			}
		},
		
		//初始化音频播放
		initAudio(){
			this.innerAudioContent = uni.createInnerAudioContext();
			this.innerAudioContent.autoplay = true;
			//this.innerAudioContent.loop = true;
			this.innerAudioContent.src = this.courseFile.file;
			this.initAudioStatus = true;
			this.audioPlayStatus = true;
			let that = this;
			this.innerAudioContent.onCanplay(function(res){
				let intervalID = setInterval(() => {
				    if (that.innerAudioContent.duration !== 0) {
				      clearInterval(intervalID); // 清除定时器
				     that.duration = that.innerAudioContent.duration;
				    }
				},100)
			});
			this.innerAudioContent.onTimeUpdate(function(){
				let duration = that.innerAudioContent.duration;
				let currentTime = that.innerAudioContent.currentTime;
				that.viewTime = currentTime;
				let leftTime = duration >= currentTime ? (parseFloat(duration) - parseFloat(currentTime)) : 0;
				if (leftTime>=0) {
					var h,m,s;
				    h = Math.floor(leftTime/60/60);
				    m = Math.floor(leftTime/60);
				    s = Math.floor(leftTime);
					that.remainingTime = (h<10?'0'+h:h)+':'+ (m<10?'0'+m:m) + ':'+(s<10?'0'+s:s);
				}else{
					that.remainingTime = '00:00:00';
				}
			});
			this.innerAudioContent.onEnded(()=>{
				//console.log(that.innerAudioContent.currentTime);
				that.viewTime = that.innerAudioContent.duration;
				that.audioPlayStatus = false;
				that.playTime();
			})
		},
		
		//初始化视频频播放
		initVideo(){
			if(!this.isHideVideo){
				this.videoContext = uni.createVideoContext('myVideo',this)
				this.initVideoStatus = true;
			}
			
		},
		
		//销毁当前实例
		destroyMedia(){
			if(this.courseDetail.type == 2){
				this.initAudioStatus && this.innerAudioContent.destroy();
				return true;
			}if(this.courseDetail.type == 1){
				return true;
			}
		},

		//视频长度
		timeChange(e){
			this.viewTime = e.detail.currentTime;
		},
		
		//视频提交
		playTime(){
			if(this.viewTime<=0) return false;
			this.$core.post({url:'xiluedu.course/play_time',data:{type:1,course_file_id: this.courseFile.id,course_id: this.course_id,view_time:this.viewTime},success:(ret)=>{
			
			},loading:false});
		},
		
		//评价
		addComment(){
			if(!this.$user.getUserinfo(true)){
				return false;
			}
			let content = this.content;
			if(content == ''){
				uni.showToast({title: '评论内容不得为空',icon: 'none'});
				return false;
			}
			this.$core.post({url:'xiluedu.course_comment/add_comment',data:{course_id: this.course_id,content:content},success:(ret)=>{
			      uni.showToast({title: '评论成功',icon: 'none'});
				  this.commentPopClose();
			}});
		},
		//（取消）收藏
		collect(){
			this.$core.post({url:'xiluedu.course/toggle_collection',data:{course_id: this.course_id},success:(ret)=>{
			      this.courseDetail.collection_status = ret.data.collection_status;
			}});
		},
		
		//购买
		buy(){
			if(!this.$user.getUserinfo(true)){
				return false;
			}
			// #ifdef MP-WEIXIN
			if(getApp().globalData.isIos && this.platformStatus==0){
				uni.showModal({
					title:'提示',
					content: "IOS端暂不支持支付",
					success() {
						
					}
				})
				return false;
			}
			// #endif
			let courseDetail = this.courseDetail;
			if(courseDetail.is_charge == 0){
				uni.showToast({title:'免费课程无需购买',icon: "none"});
				return false;
			}else if(courseDetail.is_charge == 1){
				if(courseDetail.is_vip){
					uni.showToast({title:'您已是Vip无需购买',icon: "none"});
					return false;
				}else if(courseDetail.is_buy){
					uni.showToast({title:'您已购买,请勿重复购买',icon: "none"});
					return false;
				}
			}else{
				if(courseDetail.is_buy){
					uni.showToast({title:'您已购买,请勿重复购买',icon: "none"});
					return false;
				}
			}
			// 可购买
			uni.navigateTo({
				url: '/pages/confirm_order/confirm_order?course_id='+courseDetail.id
			})
		},
		
		//推荐课程跳转
		navication(id, type) {
			if (type == 3) {
				// 文章
				uni.navigateTo({
					url: '../article_detail/article_detail?course_id=' + id
				});
			} else {
				uni.redirectTo({
					url: '../course_video_detail/course_video_detail?course_id=' + id
				});
			}
		},
		// 点击详情tab
		detailTabClick(i) {
			this.detailTabCurrent = i;
		},
		// 点击打赏tab
		rewardTabClick(i) {
			this.rewardTabCurrent = i;
		},
		// 打开分享弹窗
		sharePopOpen() {
			this.$refs.sharePopup.open();
		},
		// 关闭分享弹窗
		sharePopClose() {
			this.$refs.sharePopup.close();
		},
		// 打开打赏弹窗
		rewardPopOpen() {
			this.$refs.rewardPopup.open();
		},
		// 打开评论弹窗
		commentPopOpen() {
			this.$refs.commentPopup.open();
		},
		// 关闭评论弹窗
		commentPopClose() {
			this.$refs.commentPopup.close();
		},
		// 显示隐藏详情
		showDetail() {
			this.isShow = !this.isShow;
		},
		// 打开海报弹窗
		posterPopOpen() {
			this.$refs.posterPopup.open();
			this.$refs.sharePopup.close();
		},
		saveImage() {
			let that = this;
			uni.saveImageToPhotosAlbum({
				filePath: that.posterPath,
				success: function() {
					uni.showToast({
						icon: 'success',
						title: '保存成功'
					});
				}
			});
		},
	},
};
</script>

<style scoped>
.course-info-wrap .media {
	display: block;
	width: 100%;
	height: 420rpx;
	border-radius: 10rpx;
}
.course-info-wrap .icon-play-num {
	display: block;
	width: 24rpx;
	height: 24rpx;
}
.course-info-wrap .btn-share {
	width: 132rpx;
	height: 42rpx;
	background: #ed1f34;
	border-radius: 21rpx;
	font-size: 24rpx;
	color: #ffffff;
	line-height: 28rpx;
}
.course-info-wrap .btn-share image {
	display: block;
	width: 24rpx;
	height: 24rpx;
}
.course-info-wrap .audio-btn {
	margin-left: 15rpx;
	width: 132rpx;
	height: 42rpx;
	border: 1rpx solid #e1e1e1;
	border-radius: 21rpx;
	font-size: 24rpx;
	color: #333333;
	line-height: 42rpx;
}
.course-info-wrap .audio-btn image {
	display: block;
	width: 30rpx;
	height: 30rpx;
}

.course-info-wrap .poster-box{
	position: relative;
	width: 100%;
	height: 420rpx;
	border-radius: 10rpx;
	overflow: hidden;
}
.course-info-wrap .poster-box .video-poster{
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 10rpx;
}

.course-info-wrap .poster-box .video-btn{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	display: block;width: 78rpx;height: 78rpx;
	border-radius: 50%;
	z-index: 5;
}

.course-info-wrap .label-free{
	display: inline-block;
	margin: 0 0 0 10rpx;
	background: var(--red);
	padding: 5rpx 15rpx;
	font-size: 20rpx;
	color: #FFF;
	border-radius: 99rpx;
}
/*  */

.detail-wrap .tab-item {
	position: relative;
	line-height: 60rpx;
	text-align: center;
	font-size: 28rpx;
	font-weight: 500;
	color: #000000;
}
.detail-wrap .tab-item::after {
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	content: '';
	width: 1rpx;
	height: 35rpx;
	background: #e1e1e1;
}
.detail-wrap .tab-item.active {
	color: var(--red);
}
.detail-wrap .tab-item.active:before {
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	content: '';
	width: 123rpx;
	height: 4rpx;
	background: var(--red);
}

.detail-wrap .course-list2 .img-course {
	width: 250rpx;
	height: 160rpx;
}
.detail-wrap .course-list2 .nav-course + .nav-course {
	margin-top: 30rpx;
}
.detail-wrap .icon-arrowup {
	display: block;
	width: 30rpx;
	height: 18rpx;
}
.detail-wrap .icon-arrowup.rotate {
	transform: rotate(180deg);
}
.detail-wrap .detail-body {
	min-height: 0rpx;
	height: 0;
	overflow: hidden;
}
.detail-wrap .detail-body.show {
	height: auto;
	min-height: 400rpx;
}
/*  */
.learn-perception .perception + .perception {
	border-top: 1rpx solid #e1e1e1;
}
.learn-perception .img-head {
	display: block;
	width: 68rpx;
	height: 68rpx;
	border-radius: 50%;
}
.learn-perception .icon-thumbs {
	display: block;
	width: 25rpx;
	height: 26rpx;
}
/*  */

.reward-wrap .reward-text {
	margin-bottom: 65rpx;
	font-size: 28rpx;
	color: #ed1f34;
	text-align: center;
}
.reward-wrap .btn-reward {
	margin: 0 auto 110rpx;
	width: 262rpx;
	height: 93rpx;
	background: var(--bg1);
	border-radius: 47px;
	font-size: 36rpx;
	color: #ffffff;
	text-align: center;
}
.reward-wrap .btn-reward .icon-reward {
	display: block;
	width: 40rpx;
	height: 42rpx;
}
.reward-wrap .reward-tab {
	width: 690rpx;
	height: 82rpx;
	text-align: center;
	font-size: 26rpx;
	color: #ed1f34;
	line-height: 82rpx;
	border: 1rpx solid var(--red);
	overflow: hidden;
}
.reward-wrap .reward-tab .tab-item.active {
	background: var(--bg1);
	color: white;
}
.reward-wrap .reward-item + .reward-item {
	border-top: 1rpx solid #e1e1e1;
}
.reward-wrap .img-head {
	display: block;
	width: 68rpx;
	height: 68rpx;
	border-radius: 50%;
}
/*  */
.recommend-list .item + .item {
	margin-top: 25rpx;
}
.recommend-list .img-post {
	display: block;
	width: 280rpx;
	height: 160rpx;
}
.recommend-list .time {
	position: absolute;
	left: 15rpx;
	bottom: 12rpx;
	padding: 6rpx 8rpx;
	background: rgba(0, 0, 0, 0.6);
	border-radius: 2rpx;
	font-size: 14rpx;
	color: #ffffff;
	line-height: 18rpx;
}
.recommend-list .icon-media {
	display: block;
	width: 30rpx;
	height: 30rpx;
}
/*  */
.foot-box1 {
	padding: 25rpx 30rpx;
}

.foot-box1 .icon {
	margin: 0 auto 5rpx;
	display: block;
	width: 40rpx;
	height: 40rpx;
}
/*  */
.foot-box2 {
	padding: 10rpx 30rpx;
}

.foot-box2 .comment-box {
	height: 60rpx;
	background: #f4f5f7;
	border: 1rpx solid #e1e1e1;
	border-radius: 30rpx;
}
.foot-box2 .icon1 {
	display: block;
	width: 30rpx;
	height: 30rpx;
}
.foot-box2 .icon2 {
	display: block;
	width: 34rpx;
	height: 34rpx;
}
.foot-box2 .m-input {
	font-size: 24rpx;
	color: #333333;
}
/*  */
.share-pop {
	padding: 80rpx 70rpx 40rpx;
	width: 750rpx;
	max-height: 500rpx;
	background: #ffffff;
	border-radius: 20rpx 20rpx 0 0;
}
.share-pop .icon {
	margin: 0 auto 30rpx;
	display: block;
	width: 90rpx;
	height: 90rpx;
	border-radius: 50%;
}
.share-pop button{
	margin: 0;
	padding: 0;
	line-height: 30rpx;
	background: #fff;
}
.share-pop button::after{
	border: 0;
	display: none;
}
/*  */
.reward-pop {
	padding: 50rpx 30rpx 55rpx;
	width: 750rpx;
	background: #ffffff;
	border-radius: 20rpx 20rpx 0 0;
}

.reward-pop .reward-label {
	margin: 0 25rpx 25rpx 0;
	width: 213rpx;
	height: 94rpx;
	border: 1rpx solid var(--red);
	border-radius: 10rpx;
	font-size: 32rpx;
	color: var(--red);
	line-height: 94rpx;
	text-align: center;
}
.reward-pop .reward-label:nth-of-type(3n) {
	margin: 0 0 25rpx;
}
.reward-pop .reward-label.active {
	background: var(--bg1);
	color: #ffffff;
}
.reward-pop .tip {
	margin-bottom: 75rpx;
	line-height: 38rpx;
}
/*  */
.comment-pop {
	padding: 40rpx 30rpx 60rpx;
	background: #ffffff;
	border-radius: 20rpx 20rpx 0 0;
}
.comment-pop .textarea {
	margin: 0 0 65rpx;
	padding: 40rpx;
	width: 690rpx;
	height: 460rpx;
	background: #f3f3f3;
	border-radius: 10rpx;
	font-size: 24rpx;
	color: #333;
	line-height: 28rpx;
}
/*  */
.audio-box {
	padding: 25rpx;
	background: rgba(255, 255, 255, 0.4);
	box-shadow: 0 2rpx 21rpx 0 rgba(0, 0, 0, 0.09);
	border-radius: 10rpx;
}
.audio-box .audio {
	display: block;
	width: 0 !important;
	height: 0 !important;
	overflow: hidden;
}
.audio-box .icon1 {
	margin: 0 auto 5rpx;
	display: block;
	width: 40rpx;
	height: 36rpx;
}
.audio-box .icon2 {
	display: block;
	width: 32rpx;
	height: 40rpx;
}
/*  */
.poster-popup {
	width: 630rpx;
	height: 830rpx;
}
.poster-popup .tip {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -65rpx;
	font-size: 24rpx;
	color: #ffffff;
	line-height: 32rpx;
	text-align: center;
}

.poster-popup .img-poster {
	display: block;
	width: 100%;
	height: auto;
	bottom: ;
}

.progress-bar{
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 20rpx;
	z-index: 10;
}
.progress-bar .icon{
	margin: 0 20rpx 0 0;
	display: block;
	width: 32rpx;
	height: 40rpx;
}
.progress-bar .bar{
	margin: 0 20rpx;
	width: 450rpx;
	height: 6rpx;
	border-radius: 10rpx;
	background-color: #FFF;
}

.progress-bar  .active-bar{
	height: 6rpx;
	border-radius: 10rpx;
	background-color: var(--red);
}

.progress-bar .audio{
	margin: 0 auto;
	width: 100%;
}
free-audio{
	margin: 0 auto;
	width: 100%;
}
@media only screen and (min-width: 800px) {
	.course-info-wrap .poster-box{
		height: 760rpx;
		border-radius: 30rpx;
	}
	
	.course-info-wrap .media{
		height: 760rpx;
		border-radius: 30rpx;
	}
	.share-pop{
		max-width: 800px;
		margin-left: auto;
		margin-right: auto;
	}
}
</style>
